<template>
	<view class="wrapper">
		<!-- 轮播图 -->
		<swiper class="swiper" indicator-dots autoplay circular indicator-color="#ccc" indicator-active-color="#fff">
			<swiper-item v-for="(item, index) in detail.pics" :key="item.pics_id"><image class="swiper-img" :src="item.pics_mid" @tap="previewImg(index)"></image></swiper-item>
		</swiper>
		<!-- 商品信息 -->
		<view class="goods-info">
			<view class="price">￥{{ detail.goods_price }}</view>
			<view class="name-favo">
				<view class="name">{{ detail.goods_name }}</view>
				<view class="favo">
					<text class="iconfont icon-share"></text>
					<text>分享</text>
				</view>
			</view>
			<view class="express">快递: 免运费</view>
		</view>
		<view class="promote">
			<view>
				<text class="name">促销</text>
				<text class="detail">满300减30元</text>
			</view>
			<view class="brother">
				<text class="name">已选</text>
				<text class="detail gray">黑色/S/1件</text>
			</view>
		</view>
		<!-- 图文介绍 -->
		<view class="goods-detail">
			<!-- tabbar -->
			<view class="tabs">
				<text @tap="changeTab(0)" :class="{ active: tabIndex === 0 }">图文介绍</text>
				<text @tap="changeTab(1)" :class="{ active: tabIndex === 1 }">规格参数</text>
			</view>
			<!-- 内容 -->
			<view class="main">
				<!-- 图文介绍 -->
				<view v-html="detail.goods_introduce" v-show="tabIndex === 0"></view>
				<!-- 规格参数 -->
				<view v-show="tabIndex === 1">
					<view class="attr-box">
						<view class="tr" v-for="item in detail.attrs" :key="item.attr_id">
							<view class="td">{{ item.attr_name }}</view>
							<view class="td">{{ item.attr_value }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottom">
			<view class="icon-text">
				<text class="iconfont icon-kefu"></text>
				<text>联系客服</text>
			</view>
			<view class="icon-text" @tap="toCart">
				<text class="iconfont icon-cart"></text>
				<text>购物车</text>
			</view>
			<view class="btn add-cart-btn" @tap="add2cart">加入购物车</view>
			<view class="btn buy-btn">立即购买</view>
		</view>
	</view>
</template>

<script>
	// map辅助函数
	import {mapMutations} from 'vuex'
export default {
	data() {
		return {
			// 详情数据
			detail: {},
			// tab索引值
			tabIndex: 0
		};
	},
	methods: {
		...mapMutations(['ADD2CART']),
		// 加入购物车
		add2cart(){
			this.ADD2CART(this.detail.goods_id)
		},
		// 去购物车
		toCart(){
			uni.switchTab({
				url:"../cart/cart"
			})
		},
		// 切换tab显示
		changeTab(index) {
			this.tabIndex = index;
		},
		// 图片预览
		previewImg(index) {
			uni.previewImage({
				current: index,
				urls: this.detail.pics.map(v => v.pics_big)
			});
		}
	},
	onLoad(option) {
		// 获取id
		const { goods_id } = option;
		// 接口调用
		this.$request({
			url: '/api/public/v1/goods/detail',
			method: 'get',
			data: {
				goods_id
			}
		}).then(res => {
			// 数据保存
			this.detail = res;
		});
	}
};
</script>
<style lang="less">
.wrapper {
	background-color: #f4f4f4;
	padding-bottom: 98rpx;
}

.swiper {
	height: 720rpx;
}
// 商品特性
.attr-box {
	padding: 10rpx;
	.tr {
		border: 1rpx solid #d1d1d1;
		display: flex;
		.td {
			flex: 1;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 24rpx;
		}
		.td:first-child {
			border-right: 1rpx solid #d1d1d1;
		}
	}
}

.swiper-img {
	width: 100%;
	height: 720rpx;
}

.goods-info {
	padding: 40rpx 0 30rpx 20rpx;
	background-color: #fff;

	.price {
		color: #eb4450;
		font-size: 40rpx;
	}

	.name-favo {
		display: flex;
		height: 78rpx;
		margin-top: 14rpx;

		.name {
			color: #333;
			flex: 1;
			font-size: 28rpx;
			padding-right: 78rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2; // 控制多行的行数
			-webkit-box-orient: vertical;
		}

		.favo {
			border-left: 1px solid #ddd;
			width: 144rpx;
			color: #999;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
		}
	}

	.express {
		color: #999;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
}

.promote {
	margin-top: 20rpx;

	view {
		background-color: #fff;
		height: 96rpx;
		line-height: 96rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
		padding-left: 20rpx;

		&.brother {
			margin-top: 0;
		}

		.name {
			color: #404040;
		}

		.detail {
			color: #ff4055;
			margin-left: 40rpx;

			&.gray {
				color: #dfdfdf;
			}
		}
	}
}

.goods-detail {
	margin-top: 20rpx;
	background-color: #fff;

	.tabs {
		display: flex;

		text {
			flex: 1;
			text-align: center;
			color: #404040;
			font-size: 22rpx;
			height: 100rpx;
			line-height: 100rpx;
			box-sizing: border-box;

			&.active {
				color: #ff4055;
				border-bottom: 10rpx solid #ff2644;
			}
		}
	}
}

.fixed-bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 98rpx;
	display: flex;
	background-color: #fff;

	.icon-text {
		flex: 2;
		font-size: 20rpx;
		color: #404040;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.btn {
		flex: 3;
		color: #fff;
		text-align: center;
		line-height: 98rpx;

		&.add-cart-btn {
			background-color: #ffb400;
		}

		&.buy-btn {
			background-color: #ff2d4a;
		}
	}
}
</style>
